/*
   公共样式
*/
*
  margin 0
  padding 0
@font-face
  font-family 'heziWord'
  src url('https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/ttf/ttf.woff')
body, html
  overflow hidden
  font-family heziWord
  font-weight 700
  width 100vw
  height 100vh
input
  font-family heziWord
.default-enter-active
  animation bounce-ins 0.5s ease-in reverse
.default-leave-active
  animation bouncess-out 0.4s ease-in
.loadingAnimation-enter-active
  animation loading-in 0.2s
.loadingAnimation-leave-active
  animation loading-in 0.2s reverse
.wordAnimation-enter-active
  animation word-in 0.3s
.wordAnimation-leave-active
  animation word-in 0.3s reverse
.popupAnimation-enter-active
  animation popup-in 0.4s
.buttonPress
  animation buttonPress 0.5s
  animation-fill-mode forwards
// 普通绘本旁白动画
.wordGeneralBounce-enter-active
  animation bounce-wordGeneral 0.5s
.wordGeneralBounce-leave-active
  animation bounce-wordGeneral 0.2s reverse
// dock栏图标动画
.iconBounce-enter-active
  animation bounce-icon-in 0.5s ease
.iconBounce-leave-active
  animation bounce-icon-out 0.2s ease-in-out
  animation-fill-mode forwards
.iconBounce-move
  transition all 0.7s
// 详情卡动画
.bounceExpCard-enter-active
  animation bounce-expCard 0.6s ease-out
.bounceExpCard-leave-active
  animation bounce-expCard 0.6s reverse
// 意象点击动画
.imageryBounce-enter-active
  animation bounce-clue 1.5s linear
.imageryBounce-leave-active
  animation bounce-imagery 1.2s
// 角色点击动画
.roleBounce-enter-active
  animation bounce-role 0.5s
.roleBounce-leave-active
  animation bounce-role 0.5s reverse
// 对话动画
.dialogueAnimation-enter-active
  animation dialogue-in 0.4s
.dialogueAnimation-leave-active
  animation dialogue-in 0.4s reverse
// 弹出框动画
.popupBounce-enter-active
  animation bounce-opacity 0.3s
.popupBounce-leave-active
  animation bounce-opacity 0.3s reverse
.clueBounce-enter-active
  animation bounce-clue 1.5s linear
.clueBounce-leave-active
  animation bounce-imagery 1s
.enlarge
  animation enlarge 1.5s infinite
.popDown-enter-active
  animation pop-down 0.2s ease-out
.popDown-leave-active
  animation pop-down 0.2s ease-in reverse
.flash
  animation flash 1.5s infinite
.fadeIn
  opacity 0
  animation fadeIn 1s ease 1s
  animation-fill-mode forwards
@keyframes buttonPress
  0%
    transform scale(1)
    opacity 1
  50%
    transform scale(1.2)
    opacity 0.5
  100%
    transform scale(1.2)
    opacity 0
@keyframes touch
  0%
    opacity 1
    transform scale(1)
  99%
    opacity 0
    width 1rem
    height 1rem
    transform scale(1.8)
  100%
    transform scale(0)
@keyframes bounce-ins
  0%
    transform scale(1)
    opacity 1
  100%
    transform scale(1.6)
    opacity 1
@keyframes bouncess-out
  0%
    opacity 1
  100%
    opacity 0
@keyframes popup-in
  0%
    opacity 0
    transform translateY(-10rem)
  100%
    opacity 1
    transform translateY(0rem)
@keyframes word-in
  0%
    transform translate3d(calc(0px - var(--X)), calc(7rem + var(--Y)), 0)
  100%
    transform translate3d(calc(0px - var(--X)), var(--Y), 0)
@keyframes loading-in
  0%
    opacity 0
  100%
    opacity 1
@keyframes bounce-recCard
  0%
    transform scale(0)
    opacity 0
  100%
    transform scale(1)
    opacity 1
@keyframes fadeIn
  0%
    opacity 0
  100%
    opacity 1
@keyframes big
  0%
    transform scale(1)
  50%
    transform scale(1.5)
  100%
    transform scale(1)
@keyframes bounce-icon-in
  0%
    transform scale(0)
  50%
    transform scale(1.2)
  100%
    transform scale(1)
@keyframes bounce-icon-out
  0%
    transform scale(1)
  100%
    transform scale(0)
@keyframes bounce-expCard
  0%
    transform translate3d(0, 15rem, 0) scale(0.1)
    opacity 0
  50%
    transform translate3d(0, 0rem, 0) scale(1.3)
    opacity 0.3
  100%
    transform translate3d(0, 0rem, 0) scale(1)
    opacity 1
@keyframes bounce-imagery
  0%
    transform scale(1)
    filter brightness(1)
    opacity 1
  100%
    transform scale(2.8)
    filter brightness(3)
    opacity 0
@keyframes bounce-card
  0%
    transform scale(0)
    opacity 0
  100%
    transform scale(2.5)
    opacity 1
@keyframes bounce-role
  0%
    transform scale(0)
  50%
    transform scale(1.2)
  100%
    transform scale(1)
@keyframes rolesRotate
  0%
    transform rotate(0deg) scale(1.8)
  100%
    transform rotate(480deg) scale(1.8)
@keyframes bounce-wordGeneral
  0%
    transform translate(var(--X), calc(0px - var(--Y))) scale(0)
  50%
    transform translate(var(--X), calc(0px - var(--Y))) scale(1.05)
  100%
    transform translate(var(--X), calc(0px - var(--Y))) scale(1)
@keyframes bounce-information
  0%
    transform scale(1)
    box-shadow 0px 0px 0rem gold
  50%
    transform scale(1.1)
    box-shadow 0px 0px 1rem gold
  100%
    transform scale(1)
    box-shadow 0px 0px 0rem gold
@keyframes enlarge
  0%
    transform scale(1)
  50%
    transform scale(1.05)
  100%
    transform scale(1)
@keyframes flash
  0%
    filter brightness(1)
  50%
    filter brightness(1.4)
  100%
    filter brightness(1)
@keyframes bounce-clue
  0%
    -webkit-transform matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  3.4%
    -webkit-transform matrix3d(0.407, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.407, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  6.81%
    -webkit-transform matrix3d(0.893, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.893, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  10.21%
    -webkit-transform matrix3d(1.226, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.226, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  13.61%
    -webkit-transform matrix3d(1.332, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.332, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  17.52%
    -webkit-transform matrix3d(1.239, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.239, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  21.32%
    -webkit-transform matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.069, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  25.23%
    -webkit-transform matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.938, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  29.03%
    -webkit-transform matrix3d(0.897, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.897, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  36.74%
    -webkit-transform matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  44.44%
    -webkit-transform matrix3d(1.032, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.032, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  59.86%
    -webkit-transform matrix3d(0.99, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.99, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  75.28%
    -webkit-transform matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  90.69%
    -webkit-transform matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  100%
    -webkit-transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
@keyframes dialogue-in
  0%
    transform translate3d(calc(-12rem - var(--X)), var(--Y), 0)
  100%
    transform translate3d(calc(0px - var(--X)), var(--Y), 0)
@keyframes pop-down
  0%
    transform translateY(200%)
  100%
    transform translateY(0)
